<template>
	<div class="wrap-login">
		<div class="login-box">
			<h2 class="title-log">用户登录</h2>
			<form>
				<div class="form-group">
					<label for="studentId">学号/工号</label>
					<input type="text" id="studentId" required v-model.number="LoginInfo.id" autocomplete="current-password" />
				</div>
				<div class="form-group">
					<label for="password">密码</label>
					<input
						type="password"
						id="password"
						v-model.trim="LoginInfo.pwd"
						required
						autocomplete="current-password" />
				</div>

				<div class="radio-group">
					<input
						type="radio"
						id="student"
						name="accountType"
						value="student"
						@click="(e) => (choice = e.target.value)" />
					<label for="student">学生</label>

					<input
						type="radio"
						id="dormAdmin"
						name="accountType"
						value="dormAdmin"
						@click="(e) => (choice = e.target.value)" />
					<label for="dormAdmin">宿舍管理员</label>
					<input
						type="radio"
						id="systemAdmin"
						name="accountType"
						value="systemAdmin"
						@click="(e) => (choice = e.target.value)" />
					<label for="systemAdmin">系统管理员</label>
				</div>
				<el-button class="btn-login" @click="handleLogin" v-loading="loading" @keydown.enter="handleLogin"
					>登录</el-button
				>
			</form>
			<el-button type="primary" class="btn" link @click="handleRegist">注册</el-button>
		</div>
	</div>
</template>

<script setup>
import { useRouter } from 'vue-router'
import { loginSystem } from '@/utils/axios/stuReqest'
import { useUserStore } from '@/stores/userStore'
import {reactive, ref ,getCurrentInstance} from 'vue'
import { ElMessage } from 'element-plus'
import useRegStore from '@/stores/useReg'

const { proxy }=getCurrentInstance()
const { isInteger } = useRegStore()
const choice = ref()
const LoginInfo = reactive({
	id: '',
	pwd: '',
})

const loading = ref(false)
const router = useRouter()
const userStore = useUserStore()

const stuLogin = async () => {
	let { data } = await loginSystem('/stu/login', {
		stuId: LoginInfo.id,
		password: proxy.$md5(LoginInfo.pwd),
	})
	localStorage.setItem('token', data)
	userStore.limts = 3

	router.push({ path: '/home/stu_center' })
}

/**
 * 异步函数：用户登录逻辑，针对domi用户
 * 通过调用loginSystem接口，使用houId和经过md5加密的密码进行登录
 * 成功登录后，将返回的token存储在localStorage中，并更新用户权限，最后跳转到dom中心页面
 * @async
 */
const domiLogin = async () => {
	// 调用登录系统接口，传入用户ID和加密后的密码
	let { data } = await loginSystem('/hou/login', {
		houId: LoginInfo.id,
		password: proxy.$md5(LoginInfo.pwd),
	})

	// 存储登录令牌
	localStorage.setItem('token', data)
	// 设置用户权限为domi用户
	userStore.limts = 1

	// 跳转到dom中心页面
	router.push({ path: '/home/dom_center' })
}

/**
 * 异步函数：管理员登录逻辑
 * 通过调用loginSystem接口，使用manId和经过md5加密的密码进行登录
 * 成功登录后，将返回的token存储在localStorage中，并更新用户权限，最后跳转到管理员首页
 * @async
 */
const adminLogin = async () => {
	// 调用登录系统接口，传入管理员ID和加密后的密码
	let { data } = await loginSystem('/man/login', {
		manId: LoginInfo.id,
		password: proxy.$md5(LoginInfo.pwd),
	})

	// 存储登录令牌
	localStorage.setItem('token', data)
	// 设置用户权限为管理员
	userStore.limts = 0

	// 跳转到管理员首页
	router.push({ path: '/home/index' })
}

const handleLogin = async () => {
	let flag = LoginInfo.id && LoginInfo.pwd
	console.log("pwd::",LoginInfo.pwd);
	if (!flag) return ElMessage.error({ duration: 1000, message: '请输入完整信息' })
	if (!choice.value) return ElMessage.warning({ duration: 1000, message: '请选择账号类型！' })
	if (!isInteger(LoginInfo.id)) return ElMessage.error({ duration: 1000, message: '账号必须为数字' })
	if (Number.parseInt(LoginInfo.id) > 2100000000)
		return ElMessage.error({ duration: 1000, message: 'ID不能超过:2100000000' })
	loading.value = true
	switch (choice.value) {
		case 'student':
			stuLogin()
				.then(() => (loading.value = false))
				.catch(() => (loading.value = false))
			break
		case 'dormAdmin':
			domiLogin()
				.then(() => (loading.value = false))
				.catch(() => (loading.value = false))
			break
		case 'systemAdmin':
			adminLogin()
				.then(() => (loading.value = false))
				.catch(() => (loading.value = false))
			break
	}
}

const handleRegist = () => {
	router.push('/regist')
}

</script>

<style scoped lang="scss">
.title-log {
	font-size: 25px;
	text-align: center;
	margin-bottom: 10px;
	color: #a0cfff;
	font-weight: 600;
}

.wrap-login {
	margin: 0;
	padding: 0;
	background-image: url('@/assets/img/1.jpg');
	background-repeat: no-repeat;
	background-size: cover;
	display: flex;
	justify-content: center;
	align-items: center;
	height: 100vh; /* 使内容垂直居中 */
}
.login-box {
	position: relative;
	background-color: rgba(255, 255, 255, 0.8); /* 透明白色背景，以便看到背景图片 */
	padding: 20px 60px 60px;
	border-radius: 10px;
	border: 1px solid #ccc;
	width: 400px; /* 根据需要调整宽度 */
}
.container {
	max-width: 400px;
	margin: 20px auto;
	padding: 20px;
	background-color: #fff;
	border-radius: 5px;
	box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.form-group {
	margin-bottom: 15px;
}

.form-group label {
	display: block;
	margin-bottom: 5px;
}

.form-group input[type='text'],
.form-group input[type='password'] {
	width: 100%;
	padding: 10px;
	border: 1px solid #ccc;
	border-radius: 3px;
}

input:focus {
	box-shadow: 0 0 5px #a0cfff;
}

.btn-login {
	display: block;
	width: 100%;
	padding: 10px;
	background-color: #007bff;
	color: #fff;
	border: none;
	border-radius: 3px;
	text-align: center;
	cursor: pointer;
	margin-top: 10px;
}

.btn {
	position: absolute;
	bottom: 10px;
	right: 10px;
}
.btn-login:hover {
	background-color: #0056b3;
}

.captcha-img {
	display: block;
	margin-bottom: 10px;
}

/* 账号类型单选框样式 */
.radio-group {
	margin-bottom: 10px;
}

.radio-group label {
	display: inline-block;
	margin-right: 10px;
}
</style>
